<script setup>
import  ChatContentRender from '../chatContentRender/Index.vue'
const props = defineProps({
    role: {
        type: String,
        default: 'assistant',
    },
    content: String,
    contentType:{
        type: String,
        default: 'text',
    },
    status: String,
})
</script>

<template>
    <div class="chat-box-content"
         :class="{'error':props.status==='error','user':props.role==='user'}">
        <template v-if="props.status==='loading'">
            <slot name="loading">
                <div class="chat-box-content-loading">
                    <span class="dot dot1"></span>
                    <span class="dot dot2"></span>
                    <span class="dot dot3"></span>
                    <span class="dot dot4"></span>
                    <span class="dot dot5"></span>
                    <span class="dot dot6"></span>
                </div>
            </slot>
        </template>
        <template v-else>
            <ChatContentRender :content="content" :content-type="contentType"></ChatContentRender>
        </template>
    </div>
</template>

<style scoped lang="scss">
.chat-box-content {
    font-size: var(--chat-box-content-font-size);
    padding: 8px 12px;
    max-width: 70%;
    background-color: var(--chat-box-assistant-background-color);
    color: var(--chat-box-assistant-color);
    border-radius: 12px;

    &.user {
        background-color: var(--chat-box-user-background-color);
        color: var(--chat-box-user-color);
    }

    &.error {
        background-color: var(--chat-box-assistant-error-background-color);
        color: var(--chat-box-assistant-error-color);
    }

    &-loading {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100px;
        padding: 10px;

        .dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            margin-left: 5px;
            background-color: #000000;
            animation: opacityAnimate 1s infinite linear;

        }

        .dot1 {
            animation-delay: 0.167s;
        }

        .dot2 {
            animation-delay: 0.333s;
        }

        .dot3 {
            animation-delay: 0.5s;
        }

        .dot4 {
            animation-delay: 0.667s;
        }

        .dot5 {
            animation-delay: 0.833s;
        }
    }
}

@keyframes opacityAnimate {
    0% {
        opacity: .9;
    }
    25% {
        opacity: 0.5;
    }
    50% {
        opacity: .1;
    }
    75% {
        opacity: 0.5;
    }
    100% {
        opacity: .9;
    }
}
</style>